<template>
  <div class="setUpThe">
    <template v-if=" this.$route.path == '/setUpThe' ">
      <div class="main-title">版本列表</div>
      <div class="version">
        <div class="science">
          <div class="container">
            <div class="row">
              <div class="col col-xxl-10 col-xl-12 col-lg-12 col-md-12">
                <div class="science_l">
                  <search @searchOn="searchOn" @clearChange="clearChange"></search>
                  <all-state :allState="allState" @onWrite="onWrite"></all-state>
                </div>
              </div>
            </div>
          </div>
          <el-button @click="version" style="width: 100px;" class="updateLoad">更新</el-button>
        </div>
        <el-table stripe :data="versionData" style="width: 100%" :header-cell-style="{ background: '#f2f2f2',color: '#333',fontWeight: 600, }">
          <el-table-column label="版本号" align="center"> 
            <template slot-scope="scope"> {{ scope.row.name == '' ? '--' : scope.row.name }} </template>
          </el-table-column>
          <!-- <el-table-column prop="institutions" label="机构" align="center"> </el-table-column> -->
          <!-- <el-table-column label="模式" align="center"> 
            <template slot-scope="scope">
              {{ scope.row.pattern == 1 ? '正式' : scope.row.pattern == 2 ? '灰度' : scope.row.pattern }}
            </template>
          </el-table-column> -->
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span class="mandatory">{{ scope.row.status == 1 ? '● 强制' : '' }}</span>
              <span class="non">{{ scope.row.status == 2 ? '● 非强制' : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="推送版本" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- <span class="mandatory">{{ scope.row.eqid == '全部' ? '● 全部' : '' }}</span> -->
              <span class="non">{{ scope.row.eqid == '' ? '--' : scope.row.eqid }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="更新时间" align="center"> 
            <template slot-scope="scope"> {{ scope.row.createDate == '' ? '--' : scope.row.createDate }} </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope"> <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">详情</el-button> </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>

    <transition name="transitionName">
      <router-view clss="index-main" />
		</transition>

  </div>
</template>

<script>
import search from "../../components/search/editor.vue";
import allState from '../../components/selector/allState.vue';
export default {
  components: { search, allState },
  data() {
    return {
      versionData: [],
      searchInp: '',
      qiangZhi: '',
      allState: [{value: '强制',label: '强制'},{value: '非强制',label: '非强制'}],
			currentPage: 0, // 那一页
			total: 0,       // 总条数
			pageSize: 20,   // 每页显示多少条
      newRpite: {},   // 详情跳转添加字段
    }
  },
  watch: {
    $route: {
      handler: function(newVal,oldVal) {
        this.getVersion();
      }
    }
  },
  mounted() {
    this.getVersion();
  },
  methods: {
    // 全部状态强制下拉框
    onWrite(val){
      this.currentPage = 1;
      if(val == '强制') {
        const newVal = this.qiangZhi = 1;
        this.getVersion(this.currentPage,this.searchInp, newVal);
      } else if(val == '非强制'){
        const newVal = this.qiangZhi = 2;
        this.getVersion(this.currentPage,this.searchInp, newVal);
      } else {
        this.qiangZhi = '';
        if(this.searchInp == '') {
          this.getVersion(this.currentPage,'', '');
        } else { this.getVersion(this.currentPage,this.searchInp, ''); }
      }
    },
    // 搜索框
    searchOn(val) { 
      this.currentPage = 1;
      this.searchInp = val; 
      this.getVersion(this.currentPage,val, this.qiangZhi) 
    },
    // 清除搜索
    clearChange() { 
      this.currentPage = 1;
      this.searchInp = ''; 
      this.getVersion(this.currentPage, '', this.qiangZhi);
    },
    // 更新按钮
    version() {
      this.$router.push({ name: 'versionUpdate',params: {add: 'versionAdd'} });
      sessionStorage.removeItem('routerThis');
      sessionStorage.setItem('versionAdd', 'versionAdd');
    },
    // 详情
    handleEdit(index, row) {
      this.$router.push({ name: 'versionUpdate', params: row });
      sessionStorage.setItem('routerThis', true);
      sessionStorage.setItem('routerThis', JSON.stringify(row));
    },
    // 分页
    handleSizeChange(val) {
      this.currentPage = val;
      // this.getVersion();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getVersion(val, this.searchInp, this.qiangZhi);
    },
    // 列表搜索
    getVersion(page,name,status){
      this.$http.setUpthe.coursewareList({page, name, status}).then( res => {
        this.currentPage = res.currentPage;
        this.total = res.total;
        this.versionData = res.data;
      })
    },
  }
};
</script>

<style scoped>
@import '../../assets/css/setUpThe/setUpThe.scss';
</style>
